<template>
    <div class="app-container">
      <div class="main-page">
         <div class="left-part">
          <el-timeline style="max-width: 600px">
              <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              icon="MoreFilled"
              center 
              :timestamp="activity.timestamp"
              >
             
              <el-card shadow="hover" class="time-line-card">
               <div style="display:flex;align-items: center;">
                <div @click="selectEvent(activity)">
                  {{ activity.eventName }}
                </div>
                <div class="right" style="margin-left:20px">
                    <el-popover :visible="activity.visible" trigger="click" placement="top" :width="180">
                      <p>确定删除？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button size="small" text @click="activity.visible = false">取消</el-button>
                        <el-button size="small" type="primary" @click="delItem(activity)">
                          删除
                        </el-button>
                      </div>
                      <template #reference>
                        <el-icon @click="activity.visible = true" style="color:rgba(0,0,0,0.3)"><DeleteFilled /></el-icon>
                      </template>
                    </el-popover>
                    
                </div>
               </div>
              </el-card>
              </el-timeline-item>
          </el-timeline>
         </div>

        <div class="right-part">
          <!-- <el-cascader  :props="{ checkStrictly:true,value: 'eventId', label: 'eventName', children: 'children' }"  :options="eventmanageList" @change="selectEvent" /> -->
           <div class="top-events-wrap">
            <div @click="addEvent(item)" class="event-item" v-for="item in eventList.filter(item=>{return item.isQuickly==1})" :key="item.eventId">
              {{ item.eventName }}
            </div>
           </div>

          <templateone v-if="templateInfo.template==1" :dataListProps="dataListProps" :templateInfo="templateInfo"></templateone>
          <templatetwo v-if="templateInfo.template==2" :dataListProps="dataListProps" :templateInfo="templateInfo"></templatetwo>
           <el-row style="margin-top:10px">
                <el-button type="primary" @click="storeEvent" style="width:100%" >保存</el-button>
            </el-row>
        </div>

      </div>

     
       
       
    </div>
  </template>
  
  <script setup>
  function findNodeById(nodes, id) {
    for (const node of nodes) {
        if (node.eventId === id) {
            return node; // 找到节点，返回结果
        } else if (node.children) { // 如果存在子节点，递归搜索子节点
            const found = findNodeById(node.children, id);
            if (found) return found; // 如果在子节点中找到，返回结果
        }
    }
    return null; // 未找到节点，返回null
}
 



  function groupBy(arr, key) {
    const result = {};
    arr.forEach(item => {
      const groupKey = item[key];
      if (!result[groupKey]) result[groupKey] = [];
      result[groupKey].push(item);
    });
    return result;
  }

  import useSurgeryingStore from '@/store/modules/surgerying'
  import { listSurgeryevent,delSurgeryevent} from "@/api/manage/eventsurgery";
  import Templateone from './templateone.vue'
  import Templatetwo from './templatetwo.vue'

  import { addSurgeryevent} from "@/api/manage/eventsurgery";
    
  let operateEvent=[];
  const { proxy } = getCurrentInstance();
  let eventList=ref(JSON.parse(sessionStorage.getItem('shijianpeizhi')));
  let eventTree= proxy.handleTree(eventList.value, "eventId", "parentId");
  let dataListProps=ref([]);
  let exitEvent=[];
  let templateInfo=ref({});
  const loading = ref(true);

  const activities =ref([])
  
  
  
 function addEvent(event){
   
    templateInfo.value=findNodeById(eventTree, event.eventId)// 查找id为3的节点
    console.log(event)
    let newDataLine={
        local:true,
        startTime:'',
        endTime:'',
        surgeryId:useSurgeryingStore().surgerying.surgeryId,
        eventId:templateInfo.value.eventId,
        eventName:templateInfo.value.eventName,
        eventSurgeryDetailList:templateInfo.value.children.map(item=>{
          return {
            component:item.component,
            eventName:item.eventName,
            eventId:item.eventId,
            surgeryId:item.surgeryId,
            value:item.value
          }
        })
      }

    if(dataListProps.value.length==0){
      dataListProps.value=[newDataLine];
    }else{
      if(templateInfo.value.eventId==event.eventId){
        dataListProps.value.push(newDataLine)
      }else{
        dataListProps.value=[newDataLine];
      }
    }



 }

  function selectEvent(event){
      console.log(event)
      operateEvent=event;
      dataListProps.value=[];
     
      let data=eventList.value.filter(item=>{
          return item.eventId==event.eventId;
      })

       dataListProps.value=(JSON.parse(JSON.stringify(activities.value))).filter(item=>{

        return item.eventId==event.eventId

       })

       for(let i=0;i< dataListProps.value.length;i++){
        for(let j=0;j<dataListProps.value[i].eventSurgeryDetailList.length;j++){
          dataListProps.value[i].eventSurgeryDetailList[j].component = findNodeById(eventList.value, dataListProps.value[i].eventSurgeryDetailList[j].eventId).component// 查找id为3的节点
        }
       }
      
      templateInfo.value=data[0];
  } 


  function getStoreEvent(){
    
    dataListProps.value=[];
    listSurgeryevent({
      pageNum:1,
      surgeryId:useSurgeryingStore().surgerying.surgeryId,
      pageSize:100
    }).then(res=>{
      activities.value=res.rows 
      if(res.rows.length){
        selectEvent(res.rows[0])
      }

    })
  }

  function storeEvent(){
      let data=useSurgeryingStore().getEditingSurgery();
     
      for(let i=0;i<data.length;i++){
          let timeArr=data[i].eventSurgeryDetailList.filter(item=>{
            return item.component.indexOf('date')!=-1
          })
          if(timeArr[0]){
            data[i].startTime=timeArr[0].value
          }
          if(timeArr[1]){
             data[i].endTime=timeArr[1].value
          }
      }
      addSurgeryevent(data).then(e=>{
          getStoreEvent()
          proxy.$modal.msgSuccess("保存成功");
      })
  }

   function delItem(item){

     delSurgeryevent([item.eventSurgeryId]).then(res=>{
      //dataList.value.splice(index,1);
      //proxy.$modal.msgSuccess("删除成功");
      handleChange();
     })
    
  }


  
  getStoreEvent()
  </script>

  <style lang="scss">
    .main-page{
      .left-part{
        .time-line-card{
          .el-card__body{
            cursor:pointer;
            padding:8px 8px!important;
          }
        }
      }
    }
  </style>

  <style lang="scss" scoped>
    .app-container{
      height:100%;
    }
    .main-page{
      .top-events-wrap{
        display:flex;
        .event-item{
          padding:0 8px;
          border-right:1px solid #000;
          height:16px;
          display:flex;
          align-items: center;
          cursor:pointer;
          &:hover{
            color:blue;
          }
        }
      }
      height:100%;
      display:flex;
      .left-part{
        box-sizing: border-box;
        padding-top:10px;
        height:100%;
        overflow: auto;
        margin-right:18px;
      }
      .right-part{
        flex:1;
        height:100%;
        overflow: auto;
      }
    }
    
  </style>


  